<template>
	<div id="shouye">
		<div class="header">
			<div class="logo"></div>
			<div class="inputBox">
				<div class="searchBar"></div>
				<input type="text" class="input" placeholder="故宫口红" />
			</div>
			<div class="bell"></div>
		</div>
		<div class="banner"></div>
		<ul class="list">
			<li>
				<img src="../../assets/img/new_bg.png" />
				<p>故宫新品</p>
			</li>
			<li>
				<img src="../../assets/img/publish.png" />
				<p>故宫出版</p>
			</li>
			<li>
				<img src="../../assets/img/jointly_bg.png" />
				<p>故宫联名</p>
			</li>
			<li>
				<img src="../../assets/img/product_bg.png" />
				<p>文创产品</p>
			</li>
		</ul>
		<div class="shopBox">
			<div class="shopTitle">
				<span class="newMan">新人专享首单0元购</span>
				<span class="fanxian">返还100%的支付金额</span>
				<span class="go"></span>
			</div>
			<div class="shopContent">
				<div class="content">
					<div class="contentLeft">
						<div class="title">
							<h2>故宫上新</h2>
							<span>惊喜上新</span>
						</div>
						<div class="commodity">
							<ul class="c-list">
								<li class="c-one">
									<img src="../../assets/img/product_bg.png" />
									<p>￥199.9</p>
								</li>
								<li class="c-two">
									<img src="../../assets/img/jianzhi.png" />
									<p>￥39.9</p>
								</li>
							</ul>
							<div class="c-footer">
								<div class="teapot"></div>
								<div class="teapot-Text">
									<p class="name">好事登枝茶海</p>
									<p class="introduce">多福多寿</p>
									<p class="price">￥159.99</p>
								</div>
							</div>
						</div>
					</div>
					<div class="line"></div>
					<div class="contentRight">
						<div class="title">
							<h2>宫里好物</h2>
							<span>精选</span>
						</div>
						<div class="commodity">
							<ul class="c-list">
								<li>
									<div class="tea2 c-img"></div>
									<div class="textBox">
										<p>珐琅茶壶</p>
									</div>
								</li>
								<li>
									<div class="taochi c-img"></div>
									<div class="textBox">
										<p>珐琅茶壶</p>
									</div>
								</li>
								<li>
									<div class="diezhi c-img"></div>
									<div class="textBox">
										<p>珐琅茶壶</p>
									</div>
								</li>
								<li>
									<div class="jiuhu c-img"></div>
									<div class="textBox">
										<p>珐琅茶壶</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="footer">
					<span>故宫资讯</span>
					<span></span>
					<span class="">“故宫讲堂”第一百六十二讲-古陶瓷科技研究 </span>
					<span></span>
				</div>
			</div>
		</div>
		<div class="two-Title">
			<ul>
				<li>为</li>
				<li>你</li>
				<li>精</li>
				<li>选</li>
			</ul>
		</div>
		<swiper :lisData="list" class="swiper">
			<div slot="footer" class="swiperfooter">
				<span class="text1">果园老农 × 国立故宫 × IN LIGHT 新中式</span>
				<span class="fire"></span>
				<span class="rightIcon"></span>
			</div>
		</swiper>

		<div class="shangping">
			<ul>
				<li>
					<img src="../../assets/img/kouhong.png" />
					<p class="name">荷包口红•豇豆红</p>
					<div class="textBox">
						<span class="price">￥199.00</span><span>上新价</span>
					</div>
				</li>
				<li>
					<img src="../../assets/img/qidian1.png" />
					<p class="name">鹤禧觉色•气垫</p>
					<div class="textBox">
						<span class="price">￥120.00</span><span>￥199</span>
					</div>

				</li>
				<li>
					<img src="../../assets/img/qidian.png" />
					<p class="name">鹤禧觉色•气垫</p>
					<div class="textBox">
						<span class="price">￥540.00</span><span>限时</span>
					</div>
				</li>
				<li>
					<img src="../../assets/img/desk.png" />

					<p class="name">鹤舞青松丝巾</p>
					<div class="textBox">
						<span class="price">￥120.00</span>
					</div>

				</li>
			</ul>
		</div>
		<hr class="fenge" />
		<div class="two-Title">
			<ul>
				<li>好</li>
				<li>物</li>
				<li>管</li>
			</ul>
		</div>
		<div class="haowu">
			<ul class="listhaowu">
				<li @click="tojump(details)">
					<img src="../../assets/img/kouhong2.png" />
					<p class="text1">荷包口红•琥珀橘</p>
					<p class="text2">国风好礼</p>
					<div class="priceBox">
						<span class="price">￥199.00</span>
						<span class="yuexiao">月销1987</span>
					</div>
				</li>
				<li>
					<img src="../../assets/img/kouhong2.png" />
					<p class="text1">花丝比翼双飞流苏耳饰</p>
					<div class="priceBox">
						<span class="price">￥1127.00</span>
						<span class="yuexiao">月销127</span>
					</div>
					<p class="img1"></p>
					<div class="tip">
						<span class="img2"></span>
						<span class="text3">故宫首饰排行榜第一</span>
						<span class="img3"></span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>



<script>
	import swiper from '../../view/swiper/index.vue'
	export default {
		name: 'shouye',
		data() {
			return {
				//轮播图
				list: [{
						id: '1',
						text: '图片1',
						imgpath: require('../../assets/img/img-swiper.png')
					},
					{
						id: '2',
						text: '图片1',
						imgpath: require('../../assets/img/img-swiper.png')
					},
					{
						id: '3',
						text: '图片1',
						imgpath: require('../../assets/img/img-swiper.png')
					},
					{
						id: '4',
						text: '图片1',
						imgpath: require('../../assets/img/img-swiper.png')
					},
				],
				//商品详情
				details:'details',
			}
		},
		components: {
			swiper: swiper,
			
		},
		methods:{
			tojump(details) {
				this.$router.push({
					path: `/${details}`,
				})
				// console.log(details)
			},
		}
	}
</script>

<style scoped="scoped">
	#shouye {
		/* height: 18.12rem; */
		padding-bottom: 0.4rem;
	}

	#shouye .header {
		display: flex;
		background: #C30D23;
		height: 0.87rem;

	}

	#shouye .logo {
		width: 0.4rem;
		height: 0.4rem;
		background-image: url(../../assets/img/home_image_logo.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		margin: 0.5rem 0 0 0.16rem;
	}

	#shouye .inputBox {
		width: 2.6rem;
		height: 0.32rem;
		display: flex;
		margin: 0.51rem 0 0 0.07rem;
		border-radius: 0.06rem;
		background-color: rgb(205, 52, 70);

	}

	#shouye .searchBar {
		width: 0.2rem;
		height: 0.2rem;
		background-image: url(../../assets/img/searchBar.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		margin-left: 0.83rem;
		margin-top: 0.06rem;
	}

	#shouye .input {
		border: none;
		background-color: rgb(205, 52, 70);
		font-size: 0.14rem;
		color: #FFFCFC;
		opacity: 0.8;
		width: 1.0rem;
		margin-left: 0.12rem;
	}

	#shouye .bell {
		width: 0.32rem;
		height: 0.32rem;
		background-image: url(../../assets/img/bell.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		margin: 0.51rem 0 0 0.08rem;
	}

	#shouye .banner {
		height: 2.14rem;
		background-image: url(../../assets/img/banner_bg.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#shouye .list {
		display: flex;
		margin-top: 0.16rem;
		margin-left: 0.36rem;
		margin-right: 0.35rem;
		justify-content: space-between;
	}

	#shouye .list li {
		flex-direction: column;
		text-align: center;
		display: flex;
	}

	#shouye .list li img {
		width: 0.44rem;
		height: 0.44rem;
		text-align: center;
	}

	#shouye .list li p {
		font-size: 0.10rem;
		color: #333333;
	}

	#shouye .shopBox {
		margin-top: 0.31rem;
	}

	#shouye .shopTitle {
		width: 3.75rem;
		height: 1.23rem;
		background-image: url(../../assets/img/shop.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
	}

	#shouye .newMan {
		font-size: 0.14rem;
		font-weight: bold;
		color: #FFFFFF;
		position: absolute;
		top: 0.95rem;
		left: 0.28rem;
	}

	#shouye .fanxian {
		font-size: 0.1rem;
		color: #FFFFFF;
		position: absolute;
		top: 0.98rem;
		left: 1.56rem;
	}

	#shouye .go {
		display: inline-block;
		width: 0.48rem;
		height: 0.2rem;
		position: absolute;
		top: 0.95rem;
		right: 0.36rem;
		background-image: url(../../assets/img/go.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#shouye .shopContent {
		height: 2.67rem;
		background: #C30D23;
		position: relative;
	}

	#shouye .shopContent .content {
		width: 3.47rem;
		background: #FFFFFF;
		border: 0.02rem solid #FFEBB9;
		border-radius: 0.04rem;
		position: absolute;
		top: 0.12rem;
		left: 0.12rem;
		display: flex;
	}

	#shouye .shopContent .footer {
		width: 3.47rem;
		height: 0.20rem;
		background: #FFFFFF;
		border: 0.02rem solid #FFEBB9;
		border-radius: 0.02px;
		position: absolute;
		bottom: 0.13rem;
		left: 0.12rem;
		display: flex;
	}

	#shouye .shopContent .footer span {
		margin-top: 0.03rem;
	}

	#shouye .shopContent .footer span:nth-child(1) {
		font-size: 0.1rem;
		font-weight: bold;
		color: #C30D23;
		margin-left: 0.1rem;
	}

	#shouye .shopContent .footer span:nth-child(2) {
		display: inline-block;
		height: 0.12rem;
		border: 1px solid #333333;
		opacity: 1;
		margin-left: 0.08rem;
	}

	#shouye .shopContent .footer span:nth-child(3) {
		font-size: 0.1rem;
		font-weight: 400;
		color: #333333;
		margin-left: 0.12rem;
	}

	#shouye .shopContent .footer span:nth-child(4) {
		display: inline-block;
		width: 0.12rem;
		height: 0.12rem;
		background-image: url(../../assets/img/left-black.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-left: 0.33rem;

	}

	#shouye .contentLeft .title {
		display: flex;
	}

	#shouye .contentLeft .title h2 {
		font-size: 0.14rem;
		margin-top: 0.08rem;
		margin-left: 0.16rem;
	}

	#shouye .contentLeft .title span {
		width: 0.38rem;
		height: 0.12rem;
		text-align: center;
		display: inline-block;
		font-size: 0.08rem;
		color: #FFFCFC;
		background: linear-gradient(90deg, #FF6815 0%, #FF4C3C 100%);
		margin-top: 0.12rem;
		margin-left: 0.07rem;
	}

	#shouye .contentLeft .commodity .c-list {
		display: flex;
		margin: 0.11rem 0 0 0.08rem;
	}

	#shouye .contentLeft .commodity .c-list p {
		font-size: 0.10rem;
		color: #C30D23;

	}

	#shouye .contentLeft .commodity .c-list li {
		width: 0.72rem;
		height: 0.82rem;
		background: #FFF9FA;
		opacity: 1;
		display: flex;
		flex-direction: column;
		margin-left: 0.08rem;
		text-align: center;
	}

	#shouye .contentLeft .commodity .c-list img {
		width: 0.54rem;
		height: 0.54rem;
		margin: 0.08rem 0 0 0.09rem;
	}

	#shouye .contentLeft .commodity .c-footer {
		width: 1.52rem;
		height: 0.74rem;
		background: #F3FAFF;
		margin-top: 0.08rem;
		margin-left: 0.16rem;
		display: flex;
	}

	#shouye .contentLeft .commodity .c-footer .teapot {
		width: 0.68rem;
		height: 0.5rem;
		background-image: url(../../assets/img/teapot.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin: 0.12rem 0 0 0.08rem;
	}

	#shouye .contentLeft .commodity .c-footer .teapot-Text {
		margin: 0.11rem 0 0 0.08rem;
	}

	#shouye .contentLeft .commodity .c-footer .teapot-Text .name {
		font-size: 0.10rem;
		color: #333333;
	}

	#shouye .contentLeft .commodity .c-footer .teapot-Text .introduce {
		font-size: 0.08rem;
		color: #999999;
		margin-top: 0.03rem;
	}

	#shouye .contentLeft .commodity .c-footer .teapot-Text .price {
		font-size: 0.10rem;
		color: #C30D23;
		margin-top: 0.09rem;
	}

	#shouye .content .line {
		height: 1.98rem;
		border: 1px solid #707070;
		opacity: 0.06;
		margin: 0.04rem 0 0 0.09rem;
	}


	#shouye .contentRight .title {
		display: flex;
	}

	#shouye .contentRight .title h2 {
		font-size: 0.14rem;
		margin-top: 0.08rem;
		margin-left: 0.16rem;
	}

	#shouye .contentRight .title span {
		width: 0.28rem;
		height: 0.12rem;
		text-align: center;
		display: inline-block;
		font-size: 0.08rem;
		color: #FFFCFC;
		background: linear-gradient(90deg, #FFE2A5 0%, #F5A600 100%);
		margin-top: 0.12rem;
		margin-left: 0.07rem;
	}

	#shouye .contentRight .commodity .c-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#shouye .contentRight .commodity .c-list li p {
		font-size: 0.09rem;
		color: #C30D23;
		display: inline-block;
		padding: 0 0.02rem 0.02rem 0.02rem;
		background: #FFF9FA;
	}

	#shouye .contentRight .commodity .c-list {
		margin: 0.2rem 0 0 0.19rem;
	}

	#shouye .contentRight .commodity .c-list li {
		display: flex;
		flex-direction: column;
	}

	#shouye .contentRight .commodity .c-list li .tea2 {
		background-image: url(../../assets/img/tea2.png);
	}

	#shouye .contentRight .commodity .c-list li .taochi {
		background-image: url(../../assets/img/taochi.png);
	}

	#shouye .contentRight .commodity .c-list li .diezhi {
		background-image: url(../../assets/img/diezhi.png);
	}

	#shouye .contentRight .commodity .c-list li .jiuhu {
		background-image: url(../../assets/img/jiuhu.png);
	}

	#shouye .contentRight .commodity .c-list li .textBox {
		margin-top: 0.04rem;
		display: flex;
		height: 0.14rem;
		justify-content: space-around;
	}


	#shouye .contentRight .commodity .c-list li .c-img {
		width: 0.54rem;
		height: 0.54rem;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#shouye .two-Title {
		height: 0.0917rem;
		background-image: url(../../assets/img/title_image_bg.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-top: 0.32rem;
		position: relative;
	}

	#shouye .two-Title ul {
		display: flex;
		position: absolute;
		left: 1.35rem;
		top: -0.12rem;
	}

	#shouye .two-Title ul li:nth-child(1) {
		margin-left: 0;
	}

	#shouye .two-Title ul li {
		line-height: 0.32rem;
		text-align: center;
		width: 0.31rem;
		height: 0.32rem;
		font-size: 0.16rem;
		font-weight: bold;
		color: #FFFFFF;
		background-image: url(../../assets/img/title_image_word%20bg.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-left: -0.05rem;
	}

	/* .#shouye .swiper img {
		width: 3.5rem;
		height: 1.16rem;
		margin: 0.27rem 0 0 0.13rem;
		background-color: #007AFF;
	} */

	#shouye .shangping {
		margin: 0.12rem 0 0 0.12rem;
	}

	#shouye .shangping ul {
		display: flex;
		justify-content: space-between;

	}

	#shouye .shangping ul li {
		display: flex;
		flex-direction: column;
	}

	#shouye .shangping ul li img {
		width: 0.8rem;
		height: 0.8rem;
	}

	#shouye .shangping ul li .name {
		font-size: 0.1rem;
		color: #333333;
		opacity: 1;
		margin-top: 0.06rem;
	}

	#shouye .shangping ul li .price {
		font-size: 0.12rem;
		color: #C30D23;
		opacity: 1;
		border: none;
	}

	#shouye .shangping ul li span {
		font-size: 0.05rem;
		color: #C30D23;
	}

	#shouye .shangping ul li .textBox {
		display: flex;
		margin-top: 0.06rem;
	}

	#shouye .fenge {
		height: 0.12rem;
		background: #F5F5F5;
		opacity: 1;
		border: none;
		margin: 0;
		padding: 0;
		margin-top: 0.28rem;
	}

	#shouye .haowu {
		margin: 0.23rem 0 0 0.12rem;
	}

	#shouye .haowu .listhaowu {
		display: flex;
		justify-content: space-between;
	}

	#shouye .haowu .listhaowu li {
		display: flex;
		flex-direction: column;
	}

	#shouye .haowu .listhaowu li:nth-child(2) {
		margin-right: 0.12rem;
	}

	#shouye .haowu .listhaowu li img {
		width: 1.7rem;
		height: 1.5rem;
	}

	#shouye .haowu .listhaowu li .text1 {
		font-size: 0.12rem;
		opacity: 1;
	}

	#shouye .haowu .listhaowu li .text2 {
		font-size: 0.1rem;
		color: #C30D23;
		opacity: 1;
		margin-top: 0.07rem;
	}

	#shouye .haowu .listhaowu li .priceBox {
		display: flex;
		justify-content: space-between;
		margin-top: 0.06rem;
	}

	#shouye .haowu .listhaowu li .priceBox .price {
		font-size: 0.16rem;
		font-weight: bold;
		color: #C30D23;
		opacity: 1;
	}

	#shouye .haowu .listhaowu li .priceBox .yuexiao {
		font-size: 0.10rem;
		color: #999999;
		opacity: 1;
	}

	#shouye .haowu .listhaowu li .img1 {
		display: inline-block;
		background-image: url(../../assets/img/line.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		height: 0.01rem;
		width: 1.7rem;
		margin-top: 0.09rem;
	}

	#shouye .haowu .listhaowu li .tip {
		display: flex;
		margin-top: 0.04rem;
	}

	#shouye .haowu .listhaowu li .tip .img2 {
		display: inline-block;
		width: 0.12rem;
		height: 0.12rem;
		background-image: url(../../assets/img/card.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-left: 0.06rem;
	}

	#shouye .haowu .listhaowu li .tip .text3 {
		font-size: 0.1rem;
		color: #333333;
		opacity: 1;
		margin-left: 0.06rem;
	}

	#shouye .haowu .listhaowu li .tip .img3 {
		display: inline-block;
		width: 0.12rem;
		height: 0.12rem;
		background-image: url(../../assets/img/right.png);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		margin-left: 0.35rem;
	}
</style>
<style scoped="scoped" lang="less">
	/deep/.swiperBox{
		margin-top: 0.27rem;
	}
	/deep/ .swiperImg{
		margin-left: 0.13rem;
		display: block;
		width: 3.5rem;
		height: 1.16rem;
	}
	.swiperfooter{
		margin-top: -0.32rem;
		margin-left: 0.13rem;
		z-index: 10;
		width: 3.5rem;
		line-height: 0.32rem;
		height: 0.32rem;
		display: flex;
		background-color: lightgray;
		opacity: 0.8;
		.text1{
			font-size: 0.12rem;
			color: #FFFFFF;
			opacity: 1;
			margin-left: 0.08rem;
		}
		.fire{
			width: 0.098rem;
			height: 0.1265rem;
			display: inline-block;
			background-image: url(../../assets/img/qq.png);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			margin: 0.1rem 0 0 0.19rem;
		}
		.rightIcon{
			width: 0.2rem;
			height: 0.2rem;
			display: inline-block;
			background-image: url(../../assets/img/right-icon.png);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			margin: 0.08rem 0 0 0.70rem;
		}
	}
</style>
